<template> 
  <div class="login-container"> 
    <div class="background"> 
      <!-- 背景图片 --> 
    </div> 
    <h2>基于可视化的Transformer解释系统</h2>
    <div class="form-container"> 
      <!-- 表单容器 --> 
      <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form form-body" justify="center"> 
        <!-- el-form组件，model属性绑定数据，rules属性绑定规则 --> 
        <el-form-item prop="username"> 
          <!-- 账号输入框 --> 
          <el-input prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"></el-input> 
        </el-form-item> 
        <el-form-item prop="password"> 
          <!-- 密码输入框 --> 
          <el-input prefix-icon="Lock" v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input> 
        </el-form-item> 
        <el-form-item > 
          <!-- 登录按钮 --> 
          <el-button type="primary" @click="login">登录</el-button> 
        </el-form-item> 
      </el-form> 
    </div> 
  </div> 
</template> 
 
<script> 
import { login, setUserCredit } from "../utils/apiUser.js" 
export default { 
  data() { 
    return { 
      loginForm: { 
        username: '', 
        password: '' 
      }, 
      rules: { 
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], 
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }] 
      } 
    } 
  }, 
  methods: { 
    login() { 
      this.$refs.loginForm.validate(valid => { 
        // 验证表单数据 
        if (valid) { 
          login(this.loginForm.username, this.loginForm.password).then(res =>{ 
            // 发送登录请求并返回结果 
            if (res.code === 0) { 
              // localStorage.setItem('token', res.data['token']); 
              setUserCredit(res.data)
              // 登录成功，保存token到localStorage并跳转到用户主页 
              this.$router.push('/'); 
            } else { 
              // 登录失败，提示错误信息 
              this.$message.error('用户名或密码错误'); 
            } 
          }).catch(() => { 
            this.$message.error('用户名或密码错误'); 
          }); 
        } 
      }); 
    } 
  } 
} 
</script> 
 
<style scoped> 
.login-container { 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.form-container { 
  width: 80%; 
} 
.login-form { 
  padding: 20px; 
  background-color: #fff; 
  border-radius: 5px; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
} 
 
.form-body { 
  background: rgba(255, 255, 255, 0.5); 
} 
</style>
